//用户输入模块
<template>
	<div class="inputCase_container">
		<!--
			<h1>{{ title }}</h1>
			<p>住院流水号:{{ inputCase.id }}</p>
			<p>患者编号:{{inputCase.userId}}</p>
			
			<input @change="ChangedHandler" v-model="inputCase.age" />岁
		-->
		
		<h1 class="input_title">电子病历检索</h1>
		<div>
			<el-row :gutter="20">
				<!--left-->
				<el-col :span="12">
					<!--left 1-->
					<div class="input_left">
						<el-form label-position="left" ref="form" :model="form" label-width="100px" size="small">
							<el-row>
									<el-form-item label=" ">&nbsp;
									</el-form-item>
							</el-row>
							<div class="text-margin">
								<el-row :gutter="20" class="left-text">
									<el-col :span="12">
										<el-form-item label="姓名:">
											<el-input class="input_color" maxlength="15" v-model="inputCase.name"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item label="住院流水号:">
											<el-input v-model="inputCase.id" disabled></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="患者编号:">
											<el-input v-model="inputCase.userId" disabled></el-input>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="12">
										<div class="el-form-item"  style="width:100%;font-size: 14px;">
											<span style="width:20%;display: inline-block;">性别:</span>
											<div style="width: 80%;display: inline-block;">
												<el-radio-group style="width: 100%;" class="positiveButton" text-color="#5c5354" fill="#E0FFFB" size="medium"  v-model="inputCase.gender">
													<el-radio-button label="男"></el-radio-button>
													<el-radio-button label="女"></el-radio-button>
												</el-radio-group>
											</div>
										</div>
									</el-col>
						
									<el-col :span="12">
										<div class="el-form-item"  style="font-size: 14px;">
											<span style="width:25%;display: inline-block;">年龄:</span>
											<div style="width: 75%;display: inline-block;">
												<el-input size="small" v-model="inputCase.age" maxlength="4" style="width:60px;"></el-input><span style="margin-left: 30px;">岁</span>
											</div>
										</div>
									</el-col>
								</el-row>
								<div class="inter_span"> </div>
								<el-row :gutter="20">
									<el-col :span="12">
										<div class="el-form-item" style="width:100%;font-size: 14px;">
											<span style="width:15%;height: 50%;position: relative;bottom: 50px;display: inline-block;">诊断:</span>
											<div style="width: 85%;display: inline-block;">
												<el-input maxlength="9" style="padding-bottom: 10px;" v-model="inputCase.diagnose[0]"></el-input>
												<el-input maxlength="9"  v-model="inputCase.diagnose[2]"></el-input>
											</div>
										</div>
									</el-col>
									<el-col :span="2"><div></div></el-col>
									<el-col :span="10">
										<div class="el-form-item" style="width:100%;font-size: 14px;">
											<div style="width: 100%;display: inline-block;">
												<el-input maxlength="9" style="padding-bottom: 10px;" v-model="inputCase.diagnose[1]"></el-input>
												<el-input maxlength="9" v-model="inputCase.diagnose[3]"></el-input>
											</div>
										</div>
									</el-col>
								</el-row>
								&nbsp;
								<div class="inter_span"> </div>
								<el-row :gutter="20">
									<el-col :span="24">
										<el-checkbox-group v-model="status">
											<el-checkbox :label="1">治愈</el-checkbox>
											<el-checkbox :label="2">好转</el-checkbox>
											<el-checkbox :label="4">恶化</el-checkbox>
											<el-checkbox :label="8">死亡</el-checkbox>
										</el-checkbox-group>
									</el-col>
								</el-row>
							</div>
							
							<el-row>
									<el-form-item label=" ">&nbsp;
									</el-form-item>
							</el-row>
						</el-form>
					</div>
					
				</el-col>
				<!--right--> 
				<el-col :span="12">
					<div class="input_right1">
					<!--left 2-->
						<el-form ref="form2" :model="form">
							<!--test1-->
							<el-form-item  class="table-title" label="检查">
							</el-form-item>
							<el-space direction="vertical" :size="5">
								<div class="text-margin">
									<!--first-->
									<el-row >
										<el-col :span="23">
											<el-form-item>
												<el-select clearable style="width: 95%;" v-model="inputCase.MLS[0].name" placeholder="请选择">
												  <el-option v-for="item in MLSChooseForm" :label=item.name :value="item.name"></el-option>
												</el-select>
											 </el-form-item>
										</el-col>
										<el-col :span="1">
											<el-form-item style="width: 95%;">
												<el-radio-group text-color="#5c5354" fill="#ffe6e8" class="positiveButton" v-model="inputCase.MLS[0].positive">
													<el-radio-button class="bg-blue" :label='true' >阳性</el-radio-button>
													<el-radio-button class="bg-blue" :label='false' >阴性</el-radio-button>
												</el-radio-group>
											</el-form-item>
										</el-col>
									</el-row>
									<!--second-->
									<el-row >
										<el-col :span="23">
											<el-form-item>
												<el-select clearable style="width: 95%;" v-model="inputCase.MLS[1].name" placeholder="请选择">
												  <el-option v-for="item in MLSChooseForm" :label=item.name :value="item.name"></el-option>
												</el-select>
											 </el-form-item>
										</el-col>
										<el-col :span="1">
											<el-form-item>
												<el-radio-group text-color="#5c5354" fill="#ffe6e8" class="positiveButton" v-model="inputCase.MLS[1].positive">
													<el-radio-button class="bg-blue" :label='true' >阳性</el-radio-button>
													<el-radio-button class="bg-blue" :label='false'>阴性</el-radio-button>
												</el-radio-group>
											</el-form-item>
										</el-col>
									</el-row>
									<!--third-->
									<el-row >
										<el-col :span="23">
											<el-form-item>
												<el-select clearable style="width: 95%;" v-model="inputCase.MLS[2].name" placeholder="请选择">
												  <el-option v-for="item in MLSChooseForm" :label=item.name :value="item.name"></el-option>
												</el-select>
											 </el-form-item>
										</el-col>
										<el-col :span="1">
											<el-form-item>
												<el-radio-group text-color="#5c5354" fill="#ffe6e8" class="positiveButton"  v-model="inputCase.MLS[2].positive">
													<el-radio-button class="bg-blue" :label='true' >阳性</el-radio-button>
													<el-radio-button class="bg-blue" :label='false' >阴性</el-radio-button>
												</el-radio-group>
											</el-form-item>
										</el-col>
									</el-row>
								</div>
							</el-space>
						</el-form>
					</div>
					<p></p>
					<div class="input_right2">
					<!--left 3-->
						<el-form ref="form2" :model="form">
							<el-form-item class="table-title" label="用药">
							</el-form-item>
								<div class="text-margin">
								<!--first-->
								<el-row :gutter="20">
									<el-col :span="10">
										<el-form-item>
											<el-select  style="width: 90%;" clearable  v-model="inputCase.medicines[0].name" placeholder="请选择">
											  <el-option v-for="item in medicinesChooseForm" :label="item.name" :value="item.name"></el-option>
											</el-select>
										 </el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item>
											<el-input style="text-align: center;" placeholder="3.0" v-model="inputCase.medicines[0].dosis"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item>
											<el-select clearable v-model="inputCase.medicines[0].unit" placeholder="请选择">
											  <el-option id="test" v-for="item in unit_list" :label="item" :value="item"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<!--second-->
								<el-row :gutter="20">
									<el-col :span="10">
										<el-form-item>
											<el-select clearable style="width: 90%;" v-model="inputCase.medicines[1].name" placeholder="请选择">
											  <el-option v-for="item in medicinesChooseForm" :label="item.name" :value="item.name"></el-option>
											</el-select>
										 </el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item>
											<el-input placeholder="3.0" v-model="inputCase.medicines[1].dosis"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item>
											<el-select clearable v-model="inputCase.medicines[1].unit" placeholder="请选择">
											  <el-option v-for="item in unit_list" :label="item" :value="item"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<!--third-->
								<el-row :gutter="20">
									<el-col :span="10">
										<el-form-item>
											<el-select clearable style="width: 90%;" v-model="inputCase.medicines[2].name" placeholder="请选择">
											  <el-option v-for="item in medicinesChooseForm" :label="item.name" :value="item.name"></el-option>
											</el-select>
										 </el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item>
											<el-input placeholder="1.0" v-model="inputCase.medicines[2].dosis"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="7">
										<el-form-item>
											<el-select clearable v-model="inputCase.medicines[2].unit" placeholder="请选择">
											  <el-option v-for="item in unit_list" :label="item" :value="item"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
							</div>
						</el-form>	
					</div>
				</el-col>
			</el-row>
		</div> 
		<el-form>
			<el-form-item class="queryButton_container">
				<el-button class="input_submit"  @click="onCaseSubmit">提交</el-button>
			</el-form-item>
		</el-form>

	</div>
</template>

<script>
	/* eslint-disable */
	export default {
		/*
		 * 组件名
		 */
		name: 'InputCase',

		/*
		 * 向组件外部暴露的变量
		 */
		props: {
			title: String,
			data: Object
		},


		/*
		 * 组件数据
		 */
		data() {
			return {
				//表单
				form: {
					name: '',
					gender: '',
					num1: 'ZY010000390342',
					num2: '80511054',
					date: '',
					diagnose1: '',
					diagnose2: '',
					state: ''
				},
				form2: {
					status1:'',
					status2:'',
					status3:'',
					region:''
					
				},
				
				
				
				//'检查'
				MLSChooseForm:[
					{name:"细胞免疫检查",},
					{name:"病原体微生物镜检、培养与鉴定",}
				],
				
				//'用药'
				medicinesChooseForm:[
					{name:'0.9%氯化钠注射液',label:'支'},
					{name:'可必特溶液',unit:'瓶'},
					{name:'顺尔宁片',unit:'片'},
					{name:'沐舒坦注射液',unit:'支'},
					{name:'普米克令舒',unit:'片'},
					{name:'甲强龙针',unit:'片'},
					{name:'切诺肠溶软胶囊',unit:'片'},
					{name:'信必可都保',unit:'片'},
					{name:'肝素钠注射液',unit:'支'},
					{name:'耐信肠溶片',unit:'片'},
					{name:'茶碱缓释片',unit:'片'},
					{name:'阿斯美胶囊',unit:'片'},
					{name:'青霉素钠针',unit:'片'},
					{name:'10%氯化钾溶液',unit:'片'},
					{name:'0.9%氯化钠针',unit:'片'},
					{name:'醋酸泼尼松片',unit:'片'},
					{name:'肝素钠针',unit:'片'},
					{name:'思力华能倍乐喷雾剂',unit:'片'},
					{name:'开瑞坦片',unit:'片'},
					{name:'美卓乐片',unit:'片'},
					{name:'<无>',unit:'片'}
				],
				
				unit_list:[
					'支',
					'瓶',
					'片',
					'粒',
				],
				
				//冗余项,未来需要封装
				 status:[],

				
				//用户输入绑定的表单数据
				inputCase: {}, //end inputCase
				
			}
		},//end data

		/*
		 * 组件内部方法
		 */
		methods: {
			/*
			 * 查询相似病例,向父组件传值
			 * */
			onCaseSubmit: function() {
				var submitData = this.inputCase;
				this.$emit("submitFromInputCase", submitData);
			},
			/*form*/
			onSubmit() {
				console.log('submit!');
			},
		},
		/*
		 *  监听数据发生改变
		 */
		watch: {
			inputCase: {
				handler(val, oldVal) {
					var submitData = this.inputCase;
					this.$emit("updateFromInputCase", submitData);
				},
				deep: true //true 深度监听
			},
			status:function(oldvar,newvar){
				var temp = {
					healing:false,
					better:false,
					worse:false,
					dead:false
				}
				for(var i = 0;i < this.status.length ; i++ ){
					if(this.status[i]==1){
						temp.healing = true;
					}
					if(this.status[i]==2){
						temp.better = true;
					}
					if(this.status[i]==4){
						temp.worse = true;
					}
					if(this.status[i]==8){
						temp.dead = true;
					}
				}
				this.inputCase.status = temp ;
			}
		},


		/*
		 * 组件计算属性
		 */
		computed: {

		},


		/*
		 * 生命周期函数,页面创建时调用
		 */
		created(){
			
			//用户输入绑定的表单数据
			this.inputCase = {
				 id:"ZY01000000000",//默认住院流水号 String
				 userId:"000000001",//患者编号 String
				 gender:"男",//性别 String
				 age:21,//诊断 Number
				 diagnose:['','','',''],
				 MLS:[
					 {name:'',positive:true},
					 {name:'',positive:true},
					 {name:'',positive:true}
				 ],
				 medicines:[
					 {name:'',dosis:0,unit:''},
					 {name:'',dosis:0,unit:''},
					 {name:'',dosis:0,unit:''},
				 ],
				 status:{
					 healing:false,
					 better:false,
					 worse:false,
					 dead:false
				 },
			};//end inputCase
		}//end created
}//end exports default
</script>

<!-- 组件内部样式 -->
<style scoped>
	html{
		font-size: 20px;
	}
	.bg-purple {
/* 	    background: #e5e5e5; */
		background: #f3f3f3;
	}


		
/* 	div {
		display: block;
		margin: 2px;
		text-align: left;
	} */

	
	.left-label{
		display: block;
		height: 20px;
		
	}
	.right-label{
		display: block;
		height: 20px;
		
	}
	.input-text{
		display: block;
		height: 20px;
		
	}
	.input-radio{
/* 		display: block;
		width: 175px;
		height: 40px;
		left: 144px;
		top: 240px;
		border-radius: 2px 0px 0px 2px; */
	}
	
	/*这里写你希望按钮的大小*/
	.positiveButton {
			width: 250px;
			/*高度不建议调的过大,否则会导致字体不对齐的问题*/
			height: 40px;
	}
		
	/*不要改动这里！*/
	.positiveButton /deep/ .el-radio-button{
			width: 50%;
			height: 100%;
	}
	
	.positiveButton /deep/ .el-radio-button__inner{
			width: 100%;
			height: 100%;
			/*不要改动上面*/
	}
	
	/*临时解决问题,但可能会引起很多bug*/
	.is-active /deep/ span{
			font-weight: bold;
	}
	
	/*输入框颜色*/
	.el-input /deep/ .el-input__inner{
		background-color: #f8fffe;
	}
	
	/*选择框颜色*/
	.el-select /deep/ .el-input__inner{
		background-color: #f8fffe;
	}
	
	
	/*多选样式*/
	.el-checkbox /deep/ .el-checkbox__inner{
		border-radius: 7px;
		box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px #f5f5f5;
		border-color:#FFFFFF ;
	}
	
	
	.el-checkbox.is-checked /deep/ .el-checkbox__inner{
		background-color: #e0fffb;
		border-color: #8c9796;
	}
	
	
	.el-checkbox /deep/ .el-checkbox__label{
		color: black;
	}
	
	/*底部按钮排版*/
	.queryButton_container{
		margin-top: 50px;
		text-align: center;
	}
	
	.el-radio{
		margin-left: 3px;
		margin-right: 3px;
	}
	
	.el-form-item {
	    margin-bottom: 10px;
	}
	
	.text-margin{
		margin-left: 30px;
		margin-right: 30px;
	}
		
	.table-title /deep/ .el-form-item__label{
		font-size: 22px;
		font-weight: bold;
		margin-left: 20px;
		margin-top: 5px;
	}
	
	.input_left{
		box-shadow: 2px 6px 5px #9eb3c3;
	}
	
	.el-input /deep/ .el-input__inner{
		border-radius: 1px;
	}
	
	.el-select /deep/ .el-input__inner{
		border-radius: 1px;
	}
	

	
	
</style>
